<template>
  <div class="container">
    <view class="search_container">
      <van-search :value="keywords"
                  shape="round"
                  background="transparent" placeholder="请输入搜索关键词"
                  custom-class="orderlist-search"
                  input-class="orderlist-search"
      />
    </view>
    <van-tabs :active="active" @change="tabChange">
      <van-tab :title="item" :name="''+index+''" v-for="(item,index) in statusList" :key="index">
        <OrderList :order_status="orderStatus" v-if="orderStatus == index"></OrderList>
      </van-tab>


    </van-tabs>
    <view class="safeBottom"></view>
  </div>
</template>

<script>
import OrderList from '@/components/orderlist'

var $this;
export default {
  name: "orderlist_container",
  components: {OrderList},
  data() {
    return {
      keywords: "",
      active: 1,
      orderStatus: 0,
      statusList: [
        '待上门', '待运输', '已完成', '问题单'
      ]
    };
  },
  methods: {
    tabChange(e) {
      $this.orderStatus = e.mp.detail.name
      $this.$forceUpdate();
    }
  },
  mounted() {
  },
  created() {
    $this = this;
  },
  onLoad(query) {
    $this.active = query.order_status;
  },
  onShow() {

  }
};
</script>

<style>
.theme_color {
  color: #586ba9 !important;
  font-weight: bold;
}
</style>
<style scoped>
@import "index.css";
</style>
